<template>
<p>{{ msg }}</p>
<button @click="increment">您点击了:{{ count }}次</button>
</template>
<script>
import { ref } from 'vue';

export default{
    // setup函数是在组件中使用组合式API的入口,通用只在以下场景使用
    // 1.需要在非单文件组件中使用组合式API
    // 2.需要在基于选项式API的组件中集成基于组合式API的代码时
    setup(){
        // 在定义数据的值的时候,不能直接写
        // 一般可以使用ref函数在定义常量的值
        const msg = ref('Hello World')
        const count = ref(0)
        // 由于数据仓库的值是一个常量,不能直接修改
        // msg = ref('Hello Vue')  // 报错
        
        // 如果想要修改,只能通过ref函数中的value属性进行修改
        // 表示修改ref中的值
        msg.value = 'Hello Composition';

        // 定义函数
        function increment(){
            // count++;    // 报错
            count.value++;
        }

        return {
            msg,
            count,
            increment
        }
    }
}
</script>